<template>
	<view>
		<view class="back">
			<view class="a mb_48">
				<view class="cl_333A47 f_28 h" style="margin-top: 2rpx;">发布标题</view>
				<view class="right">
					<u--input placeholder="请填写发布事件的标题" border="none" v-model="value"></u--input>
				</view>
			</view>
			<view class="a mb_48">
				<view class="cl_333A47 f_28 h" style="margin-top: 2rpx;">发布类型</view>
				<view class="right" style="display: flex;" @click="show = true">
					<u--input placeholder="请选择发布类型" @change="change" border="none" v-model="value1" readonly></u--input>
					<image  class="right_img" src="/static/imgs/right.png" mode=""></image>
				</view>
			</view>
			<view class="a mb_48">
				<view class="cl_333A47 f_28 h" style="margin-top: 2rpx;">联系人</view>
				<view class="right">
					<u--input placeholder="请填写您的联系姓名" border="none" v-model="value2"></u--input>
				</view>
			</view>
			<view class="a">
				<view class="cl_333A47 f_28 h" style="margin-top: 2rpx;">联系电话</view>
				<view class="right">
					<u--input placeholder="请填写您的联系电话" border="none" v-model="value3"></u--input>
				</view>
			</view>
		</view>
		<view class="back">
			<view class="cl_333A47 f_28 h">发布描述</view>
			<view style="margin-left: -14rpx;" class="mb_48">
				<u--textarea v-model="value4" border="none" placeholder="在这里输入您的描述" autoHeight></u--textarea>
			</view>
			<view>
				<image @click="openChooseImg()" v-if="!imgUrl.join(',')" :src="fabu+'/imgs/addimg.png'"
					class="img_140 mar">
				</image>
				<image v-else :src="imgUrl" class="img_140 mar"></image>
			</view>
		</view>
		<view class="bottom" @click="list()">
			<view class="butt">立即发布</view>
		</view>
		<view>
			<u-picker :show="show" @cancel="cancel" @confirm="confirm" :columns="columns"></u-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				value1: '',
				value2: '',
				value3: '',
				value4: '',
				show: false,
				columns: [
					['招领', '找回']
				],
				imgUrl: [],
				fabu:this.$.ajax_url2,
				type: 1
			};
		},
		onLoad() {},
		methods: {
			list() {
				this.$.ajax(1, "POST", "lost/publish", {
					title: this.value,
					type: this.type,
					name: this.value2,
					phone: this.value3,
					des_content: this.value4,
					img_image: this.imgUrl
				}, (res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '发布成功',
							icon: 'none',
							duration: 2000
						})
						uni.navigateBack(1)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}

				})
			},
			cancel() {
				this.show = false

			},
			confirm(e) {
				// console.log(e);
				this.value1 = e.value[0]
				this.show = false
			},
			openChooseImg() {
				uni.chooseImage({
					count: 1, //最多可选择的张数
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择，和摄像头功能，默认二者都有
					success: res => {
						// this.imgUrl = res.tempFilePaths[0]
						let a = uni.uploadFile({
							url: this.$.ajax_url+'common/upload', // 仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								user: 'test'
							},
							success: (res) => {
								this.imgUrl.push(JSON.parse(res.data).data.fullurl)
							}
						});
						
					}
				});
			},
			change(e) {
				if (this.value1 == "招领") {
					this.type = 1
				} else if (this.value1 == "找回") {
					this.type = 2
				}
				// console.log(this.type);
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #F7FAFF;
	}

	.back {
		width: 638rpx;
		// height: 432rpx;
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-left: 32rpx;
		margin-bottom: 24rpx;
	}

	.a {
		display: flex;
		justify-content: space-between;
	}

	.h {
		line-height: 44rpx;
	}

	.right {
		width: 478rpx;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #F7FAFF;
	}

	.bottom {
		position: fixed;
		bottom: 96rpx;
		left: 0;
	}

	.butt {
		width: 686rpx;
		height: 100rpx;
		background: #3377FF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		text-align: center;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-left: 32rpx;
	}

	.xian {
		width: 750rpx;
		height: 40rpx;
		margin-top: 32rpx;
	}

	.right_img {
		width: 40rpx;
		height: 40rpx;
	}

	.mar {
		margin-right: 20rpx;
	}
</style>